iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
Modern Web

這個網站也太嗨!30 個網頁動態提案系列 第 32

#29-網站Tips動起來!用Tailwind自訂動畫&Hover動畫~

  • 分享至 

  • xImage
  •  

今天玩玩時下最夯的Tailwind啦~
把這30天的文章&Demo收集起來變成一個30天的彙整網站!

(原定要寫的Three.js改成Tailwind動畫,因為three.js的水實在太深啦!)

我將這30天用到的程式語言設計成標籤
點擊標籤就可以篩選下方的文章,
但因為和傳統的篩選樣式不同,
所以想要做一個動態箭頭,指引使用者點擊。
老樣子先來看成果!


(請忽略我奇怪的英文 XD)

箭頭會一直動,直到使用者點擊了標籤就會消失。
另外一個動態是Hover之後標題會動,
就來看一下我是怎麼用Tailwind做設定吧!

大綱:
1.Tailwind 自訂CSS Animation
2.Tailwind 增加Hover變數設定Animation

然後,對,我就是在寫鐵人賽的同時入了兔兔教
這一篇不會講Tailwind起手式喔!詳細請參考:
排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!


自訂動態:在Tailwind Config檔案設定

Tailwind動畫支援有限,所以我們自己在 tailwind.config.js
裡面自己做設定:

module.exports = {
  theme: {
    extend: {
		//在keyframes設定想要的動態
      keyframes: {
        //這個就是我們的箭頭動態啦往右上一直指
        point: {
          '0%': {top: '-0.25rem',left: '-1.25rem'},
          '100%': {top: '-0.5rem',left: '-1.5rem'},
        }
       },
		//這邊是我們的animation命名
       animation: {
        point: 'point 0.6s linear infinite',
       },
    },
  },
}

命名完成後就來想要家的地方把名稱加上去!
只要 animate-你取的名稱 就會吃設定檔案囉!

<!-- animate-point 就是我們要的動態啦! -->
<div>
<span class="animate-point">&#8598</span>
     Click to filter articles</div>

自訂Hover動態

我想要標題這邊在Hover的時加上動態,(才有動起來的感覺!)

先看一下成果:

tailwind的class也有hover: ,直接幫元素寫上hover後想要的變化
但只內建了backgroundColor、skew、rotate可以使用,
這時候一樣在config檔案,為animte加上變數,也可以一起套用啦!

//tailwind.config.js
module.exports = {
  theme: {
    extend: {
    //這邊是我的晃動動態
      keyframes: {
        shake: {
          '0%': {transform: 'translateX(-5%)'},
          '25%': {transform: 'translateX(5%)'},
          '50%': {transform: 'translateX(-5%)'},
          '75%': {transform: 'translateX(5%)'},
          '100%': {transform: 'translateX(-5%)'},
        }
       },
       animation: {
        shake: 'shake 0.3s linear 1',
       },
    },
  },
  //變數加在這邊
  variants: {
    extend: {
      animation: ['hover'],
    },
  },
}

再幫我們的DOM元素加上類別hover:animate-自訂名稱 就好啦!

<div class="hover:animate-shake cursor-pointer">
    <h1>Shake it up!</h1>
            
</div>

以上!

這次我用 Gulp 去做打包&壓縮,
下一篇會一起分享在Gulp裡Tailwind的設定喔!
所謂下一篇就是最後一篇啦!今天晚一點放上來~


上一篇
#28- D3.js 地圖動起來!用SVG viewbox/D3 fitExtent讓地圖置中
下一篇
#30-用Tailwind&Gulp做個動態菜單網站(完賽!)
系列文
這個網站也太嗨!30 個網頁動態提案33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言